<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/detail.css">
    <title>DNF商城</title>
</head>
<body>
        <div class="bodyBG">
                <div class="bg01"></div>
                <div class="bg02"></div>
                <div class="bg03"></div>
                <div class="bg04"></div>
                <div class="bg05"></div>
            </div>
    <!-- 头部 -->
    <header></header>

    <!-- nav导航栏 -->
    <nav>
        <ul>
            <li class="menu_nav"><a href="/html/rim_list.html#1?start=0&sort=0" target="_blank" >周边首页</a></li>
            <li><a href="/html/rim_list.html#1?start=0&sort=0" target="_blank" >全部商品</a></li>
            <li><a href="/html/rim_list.html#1?start=0&sort=0" target="_blank" >礼包收藏</a></li>
            <li><a href="/html/rim_list.html#1?start=0&sort=0" target="_blank" >领取游戏道具</a></li>
            <li><a href="/html/rim_list.html#1?start=0&sort=0" target="_blank" >土罐市集</a></li>
            <li><a href="/html/rim_list.html#1?start=0&sort=0" target="_blank" >妙趣盒·亮点大集结</a></li>
            <div class="menu_right">
                <div class="bottom_fuwu">
                </div>
            </div>
        </ul>
    </nav>

    <!-- 子导航 -->
    <div class="navzi_bar">
        <ul class="content">
            <li>
                <a href="">礼包收藏</a>
                <ul class="navzi_list">
                    <li><a href="">典藏包</a></li>
                    <li><a href="">雕塑</a></li>
                </ul>
            </li>
            <li>
                <a href="">手办模型</a>
                <ul class="navzi_list">
                    <li><a href="">手办</a></li>
                    <li><a href="">武器模型</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <!-- 商品展示头部 -->
    <div class="show_bar">
        <div class="content clearf" id="list_show">
        </div>
        <script type="text/html" id="show_render">
            <div class="show_top">
            <div class="show_left clearf">
                <!-- <div class="calimg" >
                    <ul id="showimg">
                        {{ each photo img }}
                        <li>
                            <img src="{{ img.url }}" alt="" class="zoom-image">
                        </li>
                        {{/each}}
                        <li>
                            <img src="{{ photo[0].url }}" alt="" class="zoom-image">
                        </li>
                    </ul>
                </div> -->
                <img src="{{ photo[0].url }}" alt="" class="zoom-image">
                    <ul class="gal1" id="gal1">
                        {{ each photo img }}
                        <li>
                            <a href="javascript:;" data-image="{{img.url}}" data-zoom-image="{{img.url}}">
                                <img src="{{img.url}}"  class="smallpic">
                            </a>
                        </li>
                        {{/each}}
                    </ul>
            </div>
                <div class="show_right clearf">
                    <div class="title">
                        <h3>{{ title }}</h3>
                        <span>
                            <img src="https://img.dnfcity.qq.com/goodsImages/web_img/icon/new_wen.png" alt="图片丢失了">
                        </span>
                    </div>
                    <div class="introduction">
                            {{introduction}}
                    </div>
                    <!-- 价格 -->
                    <div class="price">
                        <div class="nowPrice">
                            <span class="xianjialeft">现价</span>
                            <span class="jiage">
                                <font>￥</font>
                                <div>{{price}}</div>
                            </span>
                            <div class="slog">
                                <span class="bianqianleft"> </span>
                                <span class="biaoqian">超值价</span>
                            </div>
                        </div>
                        <div class="originPrice clearf">
                            <span class="left">原价</span>
                            <span class="yuanjia">{{originPrice}}元</span>
                        </div>
                    </div>

                    <!-- 评价 -->
                    <div class="pingjia clearf">
                        <div class="sales f1">
                            <span class="num">{{saleNum}}+</span>
                            <br>
                            <span>60天销量</span>
                        </div>
                        <div class="pingj f1">
                            <span class="num">{{saleNum}}</span>
                            <br>
                            <span>累计评价</span>
                            <br>
                            <span>5.0</span>
                        </div>
                        <div class="xih f1">
                            <span class="num">{{saleNum}}</span>
                            <br>
                            <span>累计喜欢</span>
                            <a href="javascript:;">喜欢TA</a>
                        </div>
                    </div>
                    <!-- 同款商品 -->
                    <div class="xiangq clearf">
                        <span>同款</span>
                        <ul>
                            <li>
                                <a href="javascript:;">
                                    <span></span>
                                    <img src="" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <span></span>
                                    <img src="" alt="">
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <span></span>
                                    <img src="https://img.dnfcity.qq.com/goodsImages/mall2015/1655/xiao1.jpg" alt="">
                                </a>
                            </li>
                        </ul>
                    </div>

                    <!-- 尺码 -->
                    <div class="cm">
                        <span>
                            尺码
                        </span>
                        <ul>
                            <li><a href="javascript:;"></a></li>
                        </ul>
                    </div>

                    <div class="sl clearf">
                        <span>数量</span>
                        <span>
                            <a href="javascript:;" id="num-jian"><img src="/images/detail/buy_jian.jpg" alt=""></a>
                        </span>
                        <span>
                            <input type="text" value="1" id="num">
                        </span>
                        <span>
                            <a href="javascript:;" id="num-jia"><img src="/images/detail/buy_jia.jpg" alt=""></a>
                        </span>
                    </div>

                    <!-- 预售 -->
                    <div class="yus clearf">
                        <span></span>
                        <span>女鬼剑盲盒已经上线，点击上方，立刻抢购！</span>
                    </div>

                    <!-- 购买 -->
                    <div class="shopping">
                        <span class="left">&nbsp</span>
                        <span  >
                            <a href="javascript:;" id="shopping-btn" class="buy-btn">立即购买</a>
                        </span>
                        <span  class="left-10">
                            <a href="javascript:;" id="add-to-cart-btn" class="cart-btn">加入购物车</a>
                        </span>
                    </div>
            </div>
                </div>  
            </div>
            <div class="showbar">
                <div class="bigImgContent">
                    {{each descContentList bigImg}}
                      <img src="{{bigImg.image.url}}" alt="" class="bigimg">
                    {{/each}}
                  </div>
            </div>
                
        </script>
    <!-- 底部 -->
    <div class="bottom"></div>
    <!-- 右边导航栏 -->
    <div class="right-border"></div>
</body>
<script src="/libs/jquery/jquery-3.4.1.min.js" ></script>
<script src="/libs/require/require.min.js" data-main="/js/detail"></script>
</html>